<template>
  <div class='container'>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 头部按钮 -->
      <div class="title">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" @click="handerEdit('add')" >新增试题</el-button>
      </div>
      <!-- 表单 -->
      <el-form  label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="searchOption.subjectID" placeholder="请选择">
               <el-option
                 v-for="item in subjectOptionFirst"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select  v-model="searchOption.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in subjectOptionSecond"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select  v-model="searchOption.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagsOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="searchOption.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="searchOption.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="searchOption.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficultyOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="searchOption.direction" placeholder="请选择">
                <el-option
                  v-for="item in directionOption"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="searchOption.creatorID" placeholder="请选择" >
                <el-option
                  v-for="item in userOption"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="searchOption.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="searchOption.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row>
                <el-col :span="12">
                  <el-select v-model="searchOption.province" size="medium" placeholder="请选择">
                    <el-option
                      v-for="item in cityOption"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select v-model="searchOption.city" placeholder="请选择">
                    <el-option
                      v-for="item in areaOption"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>

            </el-form-item>
          </el-col>
          <el-col :span="3" :offset='3'>
            <el-button @click="clearOption">清除</el-button>
            <el-button type="primary" @click="search" >搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 记录 -->
      <el-alert
        type="info"
        :title="`共${searchRes.counts}条记录`"
        show-icon>
      </el-alert>
      <!-- 列表 -->
      <el-table
      :data="searchRes.items"
      style="width: 100%"
      :row-style="{height:'60px'}">
      <el-table-column
        prop="number"
        label="试题编号"
        width="140">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="180">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="170">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="180">
        <template slot-scope="{row}">
          {{row.questionType==='1'?'单选':row.questionType==='2'?'多选':'简答'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="direction"
        label="题干"
        width="250">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="250">
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="170">
        <template slot-scope="{row}">
          {{row.questionType==='1'?'简单':row.questionType==='2'?'一般':'困难'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="140">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="{row}">
          <!-- 预览 -->
          <el-button
          circle
          plain
          type="primary"
          icon="el-icon-view"
          @click="preview(row)"></el-button>
          <!-- 编辑 -->
          <el-button
          circle
          plain
          type="success"
          icon="el-icon-edit"
          @click="handerEdit('edit',row)"></el-button>
          <!-- 删除 -->
          <el-button
          circle
          plain
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(row)"></el-button>
          <!-- 加入精选 -->
          <el-button
          circle
          plain
          type="warning"
          icon="el-icon-check"
          @click="choosevip(row)"></el-button>
      </template>
      </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="bottomTool">
        <PageTool :total='searchRes.counts' :paginationPage='searchOption.page' :paginationPagesize='searchOption.pagesize' @pageChange='pageChange' @pageSizeChange='pageSizeChange'>
        </PageTool>
      </div>
      <!-- 预览 -->
      <QusePre ref="qusepre"></QusePre>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
import PageTool from '@/module-manage/components/page-tool'
// 基础题库列表，基础题库删除，精选题库加入取消，基础题库详情
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'/* 学科简单列表 */
import { provinces, citys } from '@/api/hmmm/citys.js'/* 所有城市，城市下地区 */
import { simple as usersimple } from '@/api/base/users.js'/* 简单用户数据 */
import { simple as tagssimple } from '@/api/hmmm/tags.js'/* 标签简单列表 */
import { simple as directorysimple } from '@/api/hmmm/directorys.js'/* 目录简单列表 */
import QusePre from '@/module-hmmm/components/questions-preview'
export default {
  data () {
    return {
      subjectOptionFirst: [], /* 学科列表 */
      subjectOptionSecond: [], /* 二级目录 */
      tagsOption: [], /* 标签 */
      // 试题类型
      questionTypeOption: [
        {
          value: 1,
          label: '单选'
        }, {
          value: 2,
          label: '多选'
        }, {
          value: 3,
          label: '简答'
        }
      ],
      // 难度
      difficultyOption: [
        {
          value: 1,
          label: '简单'
        }, {
          value: 2,
          label: '一般'
        }, {
          value: 3,
          label: '困难'
        }
      ],
      // 方向
      directionOption: [
        {
          value: 'o2o'
        }, {
          value: '外包服务'
        }, {
          value: '企业服务'
        }, {
          value: '互联网金融'
        }, {
          value: '企业咨询'
        }, {
          value: '互联网'
        }, {
          value: '电子商务'
        }, {
          value: '其他'
        }
      ],
      cityOption: [], /* 城市 */
      areaOption: [], /* 地区 */
      userOption: [], /* 录入人 */
      // 表单信息
      searchOption: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: '',
        pagesize: 10,
        page: 1
      },
      // 渲染数据
      searchRes: {}

    }
  },
  components: { PageTool, QusePre },
  async created () {
    const subjectRes = await simple()
    const userRes = await usersimple()
    this.cityOption = provinces()
    this.search()
    this.subjectOptionFirst = subjectRes.data
    this.userOption = userRes.data
  },
  methods: {
    // 搜索
    async search () {
      const { data } = await list(this.getValue(this.searchOption))
      data.items.forEach(item => { item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss') })
      this.searchRes = data
    },
    // 清除，置空
    clearOption () {
      this.searchOption = {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: '',
        pagesize: 10,
        page: 1
      }
    },
    // 预览
    async preview (row) {
      const { data } = await detail({ id: row.id })
      this.$refs.qusepre.dialogFormV()
      this.$refs.qusepre.setList(data)
    },
    // 新增或编辑
    handerEdit (type, row) {
      if (type === 'add') {
        // 添加
        this.$router.push('/questions/new')
      } else if (type === 'edit') {
        // 编辑
        this.$router.push({
          name: 'questions-new',
          query: {
            id: row.id
          }
        })
      }
    },
    // 加入精选
    choosevip (row) {
      // 警示
      this.$confirm('此操作将添加到精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: row.id, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '成功!'
        })
        this.search()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
      console.log(row)
    },
    // 删除
    async handleDelete (row) {
      // 警示
      this.$confirm('此操作将删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.$message({
          type: 'success',
          message: '成功!'
        })
        this.search()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 复制对象
    getValue (obj) {
      const newobj = {}
      for (const k in obj) {
        if (obj[k]) {
          newobj[k] = obj[k]
        }
      }
      return newobj
    },
    pageChange (id) {
      this.searchOption.page = id
      this.search()
    },
    pageSizeChange (id) {
      this.searchOption.pagesize = id
      this.search()
    }
  },
  watch: {
    'searchOption.subjectID': {
      async handler (value) {
        this.searchOption.catalogID = ''
        this.searchOption.tags = ''
        const tafres = await tagssimple({ subjectID: value })
        const dirres = await directorysimple({ subjectID: value })
        this.subjectOptionSecond = dirres.data
        this.tagsOption = tafres.data
      }
    },
    'searchOption.province': {
      handler (value) {
        this.areaOption = citys(value)
        this.searchOption.city = ''
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .bottomTool{
    margin: 20px 0;
    float: right;
  }
.el-select {
    display: block;
}
.title{
  height: 34px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  span{
    font-size: 12px;
    color: pink;
  }
}
</style>
